<template>
    <div id="mLogin">
    <h1 id="loginTitle">欢迎登录</h1>
        <div id="phoneNum">
            <input type="text" maxlength="11" v-model="registerData.PhoneNumbers" placeholder="请输入手机号码"/>
            <span>*{{phoneNumNotice}}</span>
            <button @click="getIdCode">{{getCodeState}}</button>
        </div>
       <input type="text" maxlength="4" v-model="registerData.Code" placeholder="输入验证码" @keyup.enter="submitRegister"/>
        <button @click="submitRegister">登录</button>
        <button @click="QQlogin"><img src="../assets/img/QQicon.png"/>使用QQ登录</button>
    </div>
</template>

<script>
    export default {
        name: "mLogin",
        data(){
            return{
                api:this.Global.api,
                getCodeState:'获取验证码',
                phoneNumNotice:'手机号码默认作为登录账户',
                registerData:{
                    PhoneNumbers: '',
                    Code:''
                },
                timeout: 0,
            }
        },
        methods:{
            getIdCode(){
                if(this.timeout === 0){
                    this.$axios.post(this.api+'/index.php/index/sendsms',this.$qs.stringify(this.registerData),{headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}}).then(
                        res=>{
                            if(res.status >=200 && res.status <300){
                                if(res.data.res === "ok") {
                                    this.timeout= 60;
                                    alert('发送成功，请输入验证码');
                                    let interval = setInterval(()=>{
                                        if(this.timeout === 0) {
                                            this.getCodeState= '获取验证码';
                                            clearInterval(interval);
                                        }else{
                                            this.getCodeState=`重新发送(${this.timeout--}s)`;
                                        }
                                    },1000)
                                }else {
                                    alert('手机验证码获取失败，请重新操作！')
                                }
                            }else {
                                alert(res.status);
                            }
                        }  )
                }else {
                    alert('请勿重复点击')
                }
            },
            submitRegister(){
                this.$axios.post(this.api+'/index.php/index/verifysms',this.$qs.stringify(this.registerData),{headers:{'Content-Type': 'application/x-www-form-urlencoded'}}).then(
                    res=>{
                        if(res.status>=200&&res.status<300){
                            if(res.data.res === 'ok'){
                                alert('登录成功！');
                                document.cookie = 'login_state=true';
                                this.$emit('loginState',this.registerData.PhoneNumbers);
                            }else{
                                alert('验证码输入错误');
                            }
                        }
                    }
                )
            },
            QQlogin(){
                window.location.href= this.api+'/index.php/index/qc';
            },
        },
        mounted() {
        },
        computed: {
        },
        watch:{
            registerData:{
                deep:true,
                handler(){
                    let Reg = /^1(3|4|5|7|8)[0-9]{9}$/;
                    if(Reg.test(this.registerData.PhoneNumbers)){
                        this.phoneNumNotice = '手机号码默认作为登录账户'
                    }else{
                        this.phoneNumNotice = '请输入正确的手机号码'
                    }
                }
            }
        }
    }
</script>

<style scoped>
    #mLogin{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        width: 100vw;
        height: 100%;
        background-color: white;
    }
    #loginTitle{
        margin-bottom: 2rem;
    }
    input{
        display: block;
        width: 80vw;
    }
    #mLogin div{
        margin-bottom: 1rem;
    }
    #mLogin div>input{
        margin-bottom: 0.5rem;
    }
    #mLogin div>button{
        float: right;
        height: 2rem;
        border: none;
        background-color: #ff0a60;
        color: white;
    }
    #mLogin div>span{
        color: #ff0a60;
    }
    #mLogin>button{
        width: 80vw;
        height: 2.5rem;
        margin: 0.5rem;
        border: none;
        background-color: #ff0a60;
        color: white;
    }
    #mLogin button:nth-child(5){
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 5rem;
    }
    #mLogin button:nth-child(5) img{
        display: inline-block;
        width: 1rem;
        height: 1.2rem;
    }
</style>